import React, { useState } from 'react';
import { List, Button, Modal, Icon } from 'antd-mobile';
import { Avatar, Spin, Image, Typography } from 'antd';
import { CopyOutlined, CheckOutlined, SearchOutlined } from '@ant-design/icons';
import { connect, useRequest, history } from 'umi';
import styles from './index.less';
import { getFetch } from '@/utils/doFetch';
import BackIcon from '@/components/BackIcon';

const { Paragraph } = Typography;
const Item = List.Item;

let Database = (props) => {
  let [height, cheight] = useState(document.body.clientHeight),
    {
      global: { userinfo, companies },
    } = props;

  let { data, loading } = useRequest(
    () => {
      return getFetch({
        url: '/wbn-api/wechat/customers/company/' + companies?.id,
        params: {},
      });
    },
    {
      performance: (res) => res.data,
    },
  );

  return (
    <div style={{ width: '100%', height: '100%' }}>
      <BackIcon></BackIcon>

      <div
        className="img center"
        style={{
          backgroundImage: `url(${require('@/assets/combg.jpg')})`,
          width: '100%',
          height: 120,
          color: '#fff',
          fontSize: 20,
          padding: 24,
        }}
      >
        <span
          style={{
            textAlign: 'center',
            textShadow: '1px 1px 3px #000',
            display: 'flex',
            paddingTop: 12,
          }}
        >
          <Paragraph
            style={{ color: '#fff' }}
            copyable={{
              icon: [
                <CopyOutlined
                  key="copy-icon"
                  style={{ color: '#fff', fontSize: 16 }}
                />,
                <CheckOutlined key="copied-icon" style={{ fontSize: 16 }} />,
              ],
            }}
          >
            {data?.name}
          </Paragraph>
        </span>
      </div>

      <List
        renderHeader={() => (
          <div className="spacebt" style={{ padding: 12 }}>
            公司信息
            <Paragraph
              style={{ margin: 0 }}
              copyable={{
                text: `
            名称:${data?.name || ''}
            纳税人识别号:${data?.enterprise_credit_code || ''}
            地址、电话:${data?.address || ''} ${data?.customer_phone || ''}
            开户行及账号:${data?.bank || ''} ${data?.bank_number || ''}
            `,
                icon: [<span>复制开票信息</span>, <span>复制成功</span>],
                tooltips: false,
              }}
            ></Paragraph>
          </div>
        )}
        className="my-list"
      >
        <Item extra={<span style={{ paddingRight: 12 }}>{data?.name}</span>}>
          公司名称
        </Item>
        <Item
          extra={
            <span style={{ paddingRight: 12 }}>
              {data?.enterprise_credit_code}
            </span>
          }
        >
          纳税人识别号
        </Item>
        <Item extra={<span style={{ paddingRight: 12 }}>{data?.address}</span>}>
          公司地址
        </Item>
        <Item
          extra={
            <span style={{ paddingRight: 12 }}>{data?.customer_phone}</span>
          }
        >
          联系电话
        </Item>
        <Item extra={<span style={{ paddingRight: 12 }}>{data?.bank}</span>}>
          开户行
        </Item>
        <Item
          extra={<span style={{ paddingRight: 12 }}>{data?.bank_number}</span>}
        >
          开户行账号
        </Item>

        <Item
          extra={
            <span style={{ paddingRight: 12 }}>
              <Image src={data?.origin_url} />
            </span>
          }
        >
          营业执照
        </Item>
      </List>

      <List
        renderHeader={() => (
          <span style={{ padding: 12, display: 'block' }}>签约信息</span>
        )}
        className="my-list"
      >
        <Item
          extra={<span style={{ paddingRight: 12 }}>{data?.unit_price}</span>}
        >
          月收费
        </Item>
        <Item
          extra={
            <span style={{ paddingRight: 12 }}>
              {data?.contracts
                ? data?.contracts.map((it) => <Image src={it?.origin_url} />)
                : ''}
            </span>
          }
        >
          合同
        </Item>
      </List>
    </div>
  );
};
export default connect(({ global, loading }) => ({
  global,
  loading,
}))(Database);
